<template>
  <div id="page_company_list">
    <Row style="margin: 5px 0px 10px 0px;">
      <Input placeholder="输入企业名称进行查询" style="width: 200px;margin-right: 20px"/>
      <Button type="primary" icon="ios-search" style="margin-right: 20px">查询</Button>
      <Button type="primary" icon="md-add" @click="showAddDialog">新增企业</Button>
    </Row>
    <Row class="search_row">

    </Row>
    <Row class="list_row">
      <Table :columns="columns" border :data="dataList" stripe>
        <template slot-scope="{ row, index }" slot="seq">
          {{(currentPage - 1) * pageSize + index + 1}}
        </template>
      </Table>
      <div class="div_page">
        <Page :total="totalCount" :current="currentPage" :page-size="pageSize"
              show-total show-elevator prev-text="<" next-text=">" @on-change="pageChg"/>
      </div>
    </Row>

    <!-- 新增弹窗 -->
    <Modal v-model="showEntityModel" width="600" :title="entityModelTitle">
      <Form ref="entityForm" :model="entityForm" :rules="addFormRules" :label-width="120">
        <FormItem label="企业名称" prop="name">
          <Input v-model="entityForm.name" placeholder="请输入企业名称"></Input>
        </FormItem>
        <FormItem label="企业地址" prop="addr">
          <Input v-model="entityForm.addr" placeholder="请输入企业地址"></Input>
        </FormItem>
      </Form>
      <div slot="footer" style="text-align: center">
        <Button type="primary" @click="saveOrUpdate" :loading="saveLoading">
          <span v-if="!saveLoading">保存</span>
          <span v-else>保存....</span>
        </Button>
      </div>
    </Modal>
  </div>

</template>

<script>
import UserApi from '@/api/userApi'
import RoleApi from '@/api/roleApi'
import { isEmpty } from '@/libs/util'

export default {
  name: 'mg-user-mgr',
  data () {
    return {
      scrollTop: 0,
      saveLoading: false,
      entityForm: { id: '', name: '', addr: '' },
      entityModelTitle: '新增企业',
      addFormRules: {
        name: [
          { required: true, message: '企业名称不能为空！', trigger: 'blur' }
        ],
        addr: [
          { required: true, message: '企业地址不能为空！', trigger: 'blur' }
        ]
      },
      showEntityModel: false,
      totalCount: 122,
      currentPage: 1,
      pageSize: 20,
      dataList: [],
      columns: [
        {
          title: '序号',
          slot: 'seq',
          width: 65
        },
        {
          title: '企业名称',
          key: 'name'
        },
        {
          title: '地址',
          key: 'addr'
        },
        {
          title: '学员数',
          key: 'studentCount',
          width: 80
        },
        {
          title: '教练数',
          key: 'coachCount',
          width: 80
        },
        {
          title: '设备数',
          key: 'deviceCount',
          width: 80
        },
        {
          title: '操作',
          key: 'action',
          width: 180,
          render: (h, params) => {
            return h('div', [
              h('Button', {
                props: {
                  type: 'info',
                  size: 'small'
                },
                style: {
                  marginRight: '15px'
                },
                on: {
                  click: () => {
                    this.detail(params.row.id)
                  }
                }
              }, '查看'),
              h('Button', {
                props: {
                  type: 'warning',
                  size: 'small'
                },
                style: {
                  marginRight: '15px'
                },
                on: {
                  click: () => {
                    this.showEditDialog(params.row)
                  }
                }
              }, '修改'),
              h('Button', {
                props: {
                  type: 'error',
                  size: 'small'
                },
                on: {
                  click: () => {
                    this.del(params.row)
                  }
                }
              }, '删除')
            ])
          }
        }
      ]
    }
  },
  methods: {
    pageChg (selPage) {
      this.currentPage = selPage
      this.fetchDataList()
    },
    fetchDataList () {
      // mock data
      var dataArr = []
      const startIndex = (this.currentPage - 1) * this.pageSize + 1
      for (var i = 0; i < this.pageSize; i++) {
        var obj = {
          id: (i + startIndex),
          name: '泉州XXX健身俱乐部' + (i + startIndex),
          addr: '丰泽区宝洲路浦西万达广场XXXX健身' + (i + startIndex),
          studentCount: 201 + i + startIndex,
          coachCount: 39 + i + startIndex * 2,
          deviceCount: 387 + i + startIndex * 3
        }
        dataArr.push(obj)
      }
      this.dataList = dataArr
    },
    showAddDialog () {
      this.entityForm = { id: '', name: '', addr: '' }
      this.entityModelTitle = '新增企业'
      this.showEntityModel = true
    },
    showEditDialog (row) {
      this.entityForm = row
      this.entityModelTitle = '修改企业'
      this.showEntityModel = true
    },
    saveOrUpdate () {
      this.showEntityModel = false
      if (this.entityForm.id.length == 0) {
        this.$Message.success('新增企业信息成功！')
      } else {
        this.$Message.success('修改企业信息成功！')
      }
    },
    del (row) {
      this.$Modal.confirm({
        title: '删除提示',
        content: '确定删除该企业吗？',
        okText: '删除',
        cancelText: '取消',
        onOk: () => {
          this.doDel(row.id)
        }
      })
    },
    doDel (id) {
      this.$Message.success('删除成功！')
    },
    detail (id) {
      const right_main = document.getElementById('right_main')
      this.scrollTop = right_main.scrollTop
      this.$router.push({ path: '/company/companyDetail/' + id })
    }
  },
  created () {
    console.log('进入created')
    this.currentPage = 1
    this.fetchDataList()
  },
  activated () {
    console.log('进入activated')
    const router_from = this.$store.getters.routerFrom
    console.log('跳转来源:' + router_from)
    const right_main = document.getElementById('right_main')
    if (!isEmpty(router_from) && router_from == 'companyDetail') {
      console.log('activated滚动到：' + this.scrollTop)
      right_main.scrollTop = this.scrollTop
    } else {
      this.scrollTop = 0
      console.log('activated无须滚动')
      right_main.scrollTop = this.scrollTop
      this.currentPage = 1
      this.fetchDataList()
    }
  }
}
</script>
